<template>
	<view class="withdrawal">
		<view class="form-wrapper">
			<view class="item-wrapper">
				<view class="label">
					到账银行
				</view>
				<view class="value">
					{{ bankInfo.account.panBank }}
				</view>
			</view>
			<view class="item-wrapper">
				<view class="label">
					本次可提现
				</view>
				<view class="value">
					{{ canUse }}元
				</view>
			</view>
			<view class="amount-wrapper ">
				<view class="label">
					提现金额
				</view>
				<view class="amount">
					<view class="unit">
						￥
					</view>
					<input type="digit" v-model="amount" class="input" placeholder="请输入要提现的金额" />
				</view>
			</view>
			<view class="item-wrapper">
				<view v-if="!confirmRemarkStr" @click="openRemark" class="label" style="color: #F26022;">
					添加提现说明
				</view>
				<view v-else class="label" style="max-width: 500upx;">
					<text>{{ confirmRemarkStr }}</text>
					<text style="color: #F26022;margin-left: 20upx;" @click="openRemark">修改</text>
				</view>
				<view @click="all" class="value" style="color: #F26022;">
					全部提现
				</view>
			</view>
		</view>
		<!-- <view class="form-wrapper">
			<view class="item-wrapper">
				<view class="label">
					平台可提现
				</view>
				<view class="value">
					{{ subMchidInfo.availableAmount }}元
				</view>
			</view>
			<view class="item-wrapper">
				<view class="label">
					本次可提现
				</view>
				<view class="value">
					{{ canUse }}元
				</view>
			</view>
			<view class="item-wrapper noborder" v-if="commission > 0">
				<view class="label">
					其他途径已提现
				</view>
				<view class="value">
					{{ commission }}元
				</view>
			</view>
			<view class="tip" v-if="commission > 0">
				一般情况下，如果平台与微信支付的可提现金额不一致，是您通过其他途径或方式对本资金账户进行了提现，建议统一通过平台进行提现操作。
			</view>
			
		</view> -->

		<!-- <view class="tip-wrapper">
			<view class="tip">
				支付手续费，由微信支付官方在客户支付时直接收取。
			</view>
			<view class="tip">
				微信支付官方费率的为千分之六。近期微信支付针对小微企业有费率九折优惠活动，具体已微信官方政策为准。
			</view>
			<view class="tip">
				如果您通过其他途径进行了提现，已提现金额将包含在微信支付手续费中。
			</view>
		</view> -->

		<view class="btn-wrapper" @click="withdrawal">
			提现
		</view>
		<!-- <view class="desc">
			预计下个工作日到账
		</view> -->
		<uni-popup ref="popupRemark" :is-mask-click="false">
			<view class="popup-remark-wrapper">
				<view class="title-wrapper">
					提现说明
				</view>
				<view class="input-wrapper">
					<textarea auto-focus class="input" v-model="remark" placeholder="添加提现说明,最多50个字"
						maxlength="50"></textarea>
				</view>
				<view class="popup-btn-wrapper">
					<view class="btn cancel" @click="close">
						取消
					</view>
					<view class="btn" @click="confirmRemark">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subMchidInfo: {},
				amount: '',
				canUse: 0.00,
				withdrawableAmount: 0,
				remark: '',
				confirmRemarkStr: '',
				disabled: false
			}
		},
		onLoad(option) {
			this.withdrawableAmount = option.amount;
			//this.subMchidInfo = JSON.parse(option.subMchidInfo);
			//console.log("this.subMchidInfo", this.subMchidInfo)
			this.getAmount()
		},
		computed: {
			bankInfo() {
				return this.$store.state.bankInfo
			}
		},
		methods: {
			async getAmount() {
				const data = await this.$api.get('/app/citicbank-user/getBalance', {
					cdpId: this.$store.state.userInfo.pickupPointId
				})
				if (data.code === 200) {
					this.canUse = parseFloat(data.data || '0')
				}
			},
			openRemark() {
				this.remark = this.confirmRemarkStr;
				this.$refs.popupRemark.open('center')
			},
			confirmRemark() {
				this.confirmRemarkStr = this.remark;
				this.close()
			},
			close() {
				this.$refs.popupRemark.close()
			},
			all() {
				this.amount = this.canUse;
			},
			async withdrawal() {
				if (this.disabled) return
				if (!parseFloat(this.canUse)) {
					uni.showToast({
						title: '当前无可提现金额',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.amount || this.amount < 0) {
					uni.showToast({
						title: '提现的金额要大于0',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.amount > this.canUse) {
					uni.showToast({
						title: '提现的金额不能大于可提现金额',
						icon: 'none',

					})
					return
				}
				this.disabled = true;
				const data = await this.$api.post('/app/settlement-withdraw', {
					amount: this.amount,
					cdpId: this.$store.state.userInfo.pickupPointId,
					memo: this.confirmRemarkStr || null,
					canWithdrawAmount: this.withdrawableAmount,
					registerBalance: this.canUse,
				})
				if (data.code === 200) {
					uni.showToast({
						title: '提现申请已提交',
					})
					let page = getCurrentPages();
					let beforePage = page[page.length - 2];
					beforePage.$vm.refresh()
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				} else {
					this.disabled = false;
				}
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.withdrawal {
		height: 100%;
		overflow: auto;
		padding: 0 20upx;

		.form-wrapper {
			margin-top: 20upx;
			border-radius: 10upx;
			background-color: #ffffff;
			padding: 0 20upx;

			.item-wrapper {
				height: 120upx;
				display: flex;
				border-bottom: 1upx solid #efefef;
				align-items: center;
				justify-content: space-between;

				&:last-child {
					border-bottom: 0;
				}

				&.noborder {
					border: 0;
				}

			}

			.tip {
				font-size: 24upx;
				color: #677676;
				margin-top: -30upx;
			}

			.amount-wrapper {
				padding: 30upx 0;

				.amount {
					display: flex;
					align-items: center;

					.unit {
						font-size: 54upx;
						font-weight: bold;
					}

					.input {
						flex: 1;
						text-align: right;
						font-size: 40upx;
					}
				}
			}
		}

		// .tip-wrapper {
		// 	font-size: 26upx;
		// 	color: #898989;
		// 	line-height: 36upx;
		// 	padding: 40upx 20upx;
		// }

		.btn-wrapper {
			width: 550upx;
			height: 80upx;
			color: #ffffff;
			background-color: #F26022;
			border-radius: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 100upx auto 40upx;
		}

		.desc {
			font-size: 28upx;
			text-align: center;
		}

		.popup-remark-wrapper {
			width: 650upx;
			background-color: #ffffff;
			height: 340upx;
			border-radius: 20upx;
			overflow: hidden;

			.title-wrapper {
				height: 100upx;
				display: flex;
				align-items: center;
				border-bottom: 1upx solid #cecece;
				padding-left: 32upx;
			}

			.input-wrapper {
				height: 152upx;
				padding: 15upx;
				box-sizing: border-box;

				.input {
					height: 120upx;
					width: 100%;
					background-color: #f1f1f1;
					border-radius: 10upx;
					padding: 20upx;
					box-sizing: border-box;
				}
			}

			.popup-btn-wrapper {
				display: flex;
				align-items: center;
				border-top: 1upx solid #cecece;

				.btn {
					height: 90upx;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #F26022;
					color: #ffffff;

					&.cancel {
						background-color: #ffffff;
						color: #2B2B2B;
					}
				}
			}
		}
	}
</style>